<template>
  <div class="warp">
    <div ref="bar" class="bar"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
let bar = ref<HTMLElement>();
let speed = ref<number>(1);
let timer = ref<number>(0);
const startLoading = () => {
  // console.log(bar);
  let dom = bar.value as HTMLElement;
  timer.value = window.requestAnimationFrame(function fn() {
    if (speed.value < 90) {
      speed.value += 1;
      dom.style.width = speed.value + "%";
      timer.value = window.requestAnimationFrame(fn);
    } else {
      speed.value = 1;
      window.cancelAnimationFrame(timer.value);
    }
  });
  // console.log(dom);
};
const endLoading = () => {
  window.requestAnimationFrame(() => {
    let dom = bar.value as HTMLElement;
    setTimeout(() => {
      speed.value = 100;
      dom.style.width = speed.value + "%";
      setTimeout(()=>{
        dom.style.width='0'
      },100)
    }, 1000);
  });
};
// onMounted(() => {
//   startLoading();
//   endLoading()
// });
defineExpose({
  startLoading,
  endLoading,
});
</script>

<style scoped lang="less">
.warp {
  position: fixed;
  top: 0;
  width: 100%;
  height: 3px;
  .bar {
    height: inherit;
    width: 0;
    background:  rgb(64, 158, 255);
  }
}
</style>